<template>
    <div>
        <ul>
            <li v-for="(v,i) in orders" :key="i">
                <div class="a">
                    <div class="b">
                        <span>订单ID：{{v.oid}}</span>
                        <p>订单内容：{{v.content}}</p>
                    </div>
                    <div class="c">
                        <span>单价：</span>
                        <span class="peace">{{v.money}}元</span>
                    </div>
                    <div class="d">
                        <el-button class="xiang" type="primary" @click="detail(v)">详情</el-button>
                    </div>
                </div>

                <!-- 编辑弹出框 -->
    <el-dialog v-model="dialogFormVisible4Edit" title="订单详情" width="45%" align-center>
        <el-form :model="formData" label-width="120px">
        <el-form-item label="订单ID：">
            {{formData.oid}}
        </el-form-item>
        <el-form-item label="用户名：">
            {{formData.userName}}
        </el-form-item>
        <el-form-item label="订单金额：">
          {{formData.money}}
        </el-form-item>
        <el-form-item label="起始位置：">
          {{formData.slocation}}
        </el-form-item>
        <el-form-item label="终止位置：">
          {{formData.elocation}}
        </el-form-item>
        <el-form-item label="订单类型：">
                <span v-if="formData.type == 1">代买订单</span>
                <span v-if="formData.type == 2">代取订单</span>
                <span v-if="formData.type == 3">代送订单</span>
          </el-form-item>
        <el-form-item label="订单备注：">
          {{formData.other}}
        </el-form-item>
        <el-form-item label="下单时间：">
          {{formData.time}}
        </el-form-item>

        </el-form>
        <el-form-item>
          <el-button type="success" @click="dialogFormVisible4Edit = false">确定</el-button>
        </el-form-item>
      </el-dialog>

            </li>
        </ul>
    </div>

    <div class="pagination-container">
        <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total,prev,pager,next,jumper"
        :total="pagination.total"
        ></el-pagination>
      </div>
    
</template>


<script setup>
import { getApi,postApi,deleteApi,updateApi} from '@/util/api'
</script>
<script>
    export default {
        data() {
            return {
                orders: [],
                pagination:{//分页
              currentPage:1,//当前页码
              pageSize:4,//一页多少条
              total:0
            }  ,
            dialogFormVisible4Edit:false,//编辑表单是否可见
              formData:{},//表单数据
            }
        },
        created(){
        this.getAll();
        },

        methods:{
     //分页
     getAll(){
        getApi("workers/orders/"+this.pagination.currentPage+"/"+this.pagination.pageSize+"?state=3").then((rs)=>{
              this.pagination.pageSize = rs.data.data.size;
              this.pagination.currentPage = rs.data.data.current;
              this.pagination.total = rs.data.data.total;
              this.orders=rs.data.data.records;
              console.log(this.orders);
              }).catch(error=>{
                  alert(error);
              })
            },
            handleCurrentChange(currentPage){
            //修改页码值为当前选中页码值
            this.pagination.currentPage = currentPage;
            //执行查询
            this.getAll();
            },


            //详情
           detail(v){
          getApi("workers/orders/"+v.oid).then((res)=>{
            if(res.data.code == 1){
              this.formData = res.data.data;
              console.log("formdata："+this.formData);
              this.dialogFormVisible4Edit = true;
            }else{
              this.$message.error("数据同步失败，自动刷新");
            }
          }).finally(()=>{
            this.getAll();
        })},

    },

    }
</script>

<style lang="scss" scoped>
.pagination-container{
    position: absolute;
    right: 70px;
    margin-top: 40px;
  } 
.a{
    background-color: #fff;
    border-radius: 25px;
    width: 100%;
    height: 100px;
    margin-top: 5px;
    display: flex;
    position: relative;
    .b{
        margin-top: 10px;
        margin-left: 20px;
        span{
            font-size: 16px;
        }
        p{
            margin-top: 20px;
            font-size: 28px;
        }
        .oth{
            margin-top: 10px;
            font-size: 16px;
        }
    }
    .c{
        position: absolute;
        right: 300px;
        font-size: 25px;
        margin-top: 50px;
        .peace{
            color: red;
        }
    }
    .d{
        font-size: 25px;
        margin-top: 50px;
        position: absolute;
        right: 100px;
        .xiang{
            margin-left: 20px;
        }
    }

}
</style>